
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>说明</title>
<link rel="stylesheet" href="css/admin.css">
</head>

<body>
<h3 class="mha Hr">说明</h3>
<table class="tab mha mb30 w950">
  <thead>
    <tr>
      <th class="w72"></th>
      <th>说明</th>
      <th>使用方法</th>
      <th class="w120">示例</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="5">标题</td>
      <td>通栏标题，有4种可选类</td>
      <td>&lt;h3&gt;&lt;/h3&gt;</td>
      <td class="brlg"><h3>测试</h3></td>
    </tr>
    <tr>
      <td>红色(red)上边线+红色渐变背景</td>
      <td>&lt;h3 class="Hr"&gt;&lt;/h3&gt;</td>
      <td class="brlg"><h3 class="Hr">测试</h3></td>
    </tr>
    <tr>
      <td>蓝色(blue)上边线+蓝色渐变背景</td>
      <td>&lt;h3 class="Hb"&gt;&lt;/h3&gt;</td>
      <td class="brlg"><h3 class="Hb">测试</h3></td>
    </tr>
    <tr>
      <td>绿色(green)上边线+蓝色渐变背景</td>
      <td>&lt;h3 class="Hg"&gt;&lt;/h3&gt;</td>
      <td class="brlg"><h3 class="Hg">测试</h3></td>
    </tr>
    <tr>
      <td>简单标题(simple)</td>
      <td>&lt;h3 class="Hs"&gt;&lt;/h3&gt;</td>
      <td class="brlg"><h3 class="Hs">测试</h3></td>
    </tr>
    <tr>
      <td>表格</td>
      <td>自适应宽度表格</td>
      <td>标题行单元格必须用th标签，每行最后一个td必须添加class="brlg"类</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td rowspan="23">文字</td>
      <td colspan="3" class="tal brlg">文字大小(font-size)设置</td>
    </tr>
    <tr>
      <td>12像素字体</td>
      <td>class=&quot;fz12&quot;</td>
      <td class="brlg fz12">测试</td>
    </tr>
    <tr>
      <td>14像素字体</td>
      <td>class=&quot;fz14&quot;</td>
      <td class="brlg fz14">测试</td>
    </tr>
    <tr>
      <td>16像素字体</td>
      <td>class=&quot;fz16&quot;</td>
      <td class="brlg fz16">测试</td>
    </tr>
    <tr>
      <td colspan="3" class="tal brlg">文字颜色(color)设置</td>
    </tr>
    <tr>
      <td>蓝色色(blue)</td>
      <td>class=&quot;cb&quot;</td>
      <td class="brlg cb">测试</td>
    </tr>
    <tr>
      <td>宝蓝色(royalblue)</td>
      <td>class=&quot;crb&quot;</td>
      <td class="brlg crb">测试</td>
    </tr>
    <tr>
      <td>暗红色(darkred)</td>
      <td>class=&quot;cdr&quot;</td>
      <td class="brlg cdr">测试</td>
    </tr>
    <tr>
      <td>灰色(gray)</td>
      <td>class=&quot;cg&quot;</td>
      <td class="brlg cg">测试</td>
    </tr>
    <tr>
      <td>暗灰色(dimgray)</td>
      <td>class=&quot;cdg&quot;</td>
      <td class="brlg cdg">测试</td>
    </tr>
    <tr>
      <td colspan="3" class="tal brlg">文字粗细(font-weight)设置</td>
    </tr>
    <tr>
      <td>粗体</td>
      <td>class=&quot;fw7&quot;</td>
      <td class="brlg fw7">测试</td>
    </tr>
    <tr>
      <td>普通</td>
      <td>class=&quot;fw4&quot;</td>
      <td class="brlg fw4">测试</td>
    </tr>
    <tr>
      <td colspan="3" class="tal brlg">文字缩进(text-indent)设置，用在块级对象上</td>
    </tr>
    <tr>
      <td>缩进半个字</td>
      <td>class=&quot;tih&quot;</td>
      <td class="brlg tal tih">测试</td>
    </tr>
    <tr>
      <td>缩进一个字</td>
      <td>class=&quot;ti1&quot;</td>
      <td class="brlg tal ti1">测试</td>
    </tr>
    <tr>
      <td>缩进二个字</td>
      <td>class=&quot;ti2&quot;</td>
      <td class="brlg tal ti2">测试</td>
    </tr>
    <tr>
      <td>缩进负10000个字（特殊用法，用来隐藏文字内容）</td>
      <td>class=&quot;tiu&quot;</td>
      <td class="brlg tal tiu">测试</td>
    </tr>
    <tr>
      <td colspan="3" class="tal brlg">文字对齐(text-align)方向</td>
    </tr>
    <tr>
      <td>左对齐</td>
      <td>class=&quot;tal&quot;</td>
      <td class="brlg tal">测试</td>
    </tr>
    <tr>
      <td>水平居中对齐</td>
      <td>class=&quot;tac&quot;</td>
      <td class="brlg tac">测试</td>
    </tr>
    <tr>
      <td>右对齐</td>
      <td>class=&quot;tar&quot;</td>
      <td class="brlg tar">测试</td>
    </tr>
    <tr>
      <td colspan="3" class="brlg">以上属性可以组合使用达到丰富的字体效果：<span class="cdr fw7">测试</span>,<span class="crb fw7 dib tih">测试</span>,<span class="cg fw7 dib ti1">测试</span>,<span class="cdg fw7 dib ti2">测试</span></td>
    </tr>
    <tr>
      <td rowspan="5">边线</td>
      <td>灰色上边线(border-top)</td>
      <td>class=&quot;btg&quot;</td>
      <td class="brlg"><span class="btg">测试</span></td>
    </tr>
    <tr>
      <td>灰色下边线(border-bottom)</td>
      <td>class=&quot;bbg&quot;</td>
      <td class="brlg"><span class="bbg">测试</span></td>
    </tr>
    <tr>
      <td>浅灰色上边线(border-top)</td>
      <td>class=&quot;brlg&quot;</td>
      <td class="brlg"><span class="btlg">测试</span></td>
    </tr>
    <tr>
      <td>浅灰色下边线(border-bottom)</td>
      <td>class=&quot;bblg&quot;</td>
      <td class="brlg"><span class="bblg">测试</span></td>
    </tr>
    <tr>
      <td>浅灰色右边线(border-right)</td>
      <td>class=&quot;brlg&quot;</td>
      <td class="brlg"><span class="brlg">测试</span></td>
    </tr>
    <tr>
      <td rowspan="4">元素样式(display)</td>
      <td>不显示</td>
      <td>class=&quot;dn&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>内容不分段，不可设置高宽</td>
      <td>class=&quot;di&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>内容分段，可设置高度</td>
      <td>class=&quot;db&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>内容不分段，可设置高度</td>
      <td>class=&quot;dib&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td rowspan="6">宽度(width)</td>
      <td>72像素</td>
      <td>class=&quot;w72&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>90像素</td>
      <td>class=&quot;w90&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>120像素</td>
      <td>class=&quot;w120&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>200像素</td>
      <td>class=&quot;w200&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>300像素</td>
      <td>class=&quot;w300&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>950像素</td>
      <td>class=&quot;w950&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td rowspan="3">高度(height)</td>
      <td>20像素</td>
      <td>class=&quot;h20&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>24像素</td>
      <td>class=&quot;h24&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>32像素</td>
      <td>class=&quot;h32&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td rowspan="5">外边距(margin)</td>
      <td>上边距</td>
      <td>class=&quot;mt<span class="cdr fw7">X</span>&quot;(红字改为需要的像素，包括5、10、15、20、30)</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>右边距</td>
      <td>class=&quot;mr<span class="cdr fw7">X</span>&quot;(红字改为需要的像素，包括5、10、15、20、30)</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>下边距</td>
      <td>class=&quot;mb<span class="cdr fw7">X</span>&quot;(红字改为需要的像素，包括5、10、15、20、30)</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>左边距</td>
      <td>class=&quot;ml<span class="cdr fw7">X</span>&quot;(红字改为需要的像素，包括5、10、15、20、30、p45在特殊情况下用来居中)</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>横向边距</td>
      <td>class=&quot;mh<span class="cdr fw7">X</span>&quot;(红字改为需要的像素，包括5、10、15、auto)</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td rowspan="4">内边距(padding)</td>
      <td>上边距</td>
      <td>class=&quot;pt<span class="cdr fw7">X</span>&quot;(红字改为需要的像素，包括5、10、15、20、30)</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>右边距</td>
      <td>class=&quot;pr<span class="cdr fw7">X</span>&quot;(红字改为需要的像素，包括5、10、15、20、30)</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>下边距</td>
      <td>class=&quot;pb<span class="cdr fw7">X</span>&quot;(红字改为需要的像素，包括5、10、15、20、30)</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>左边距</td>
      <td>class=&quot;pl<span class="cdr fw7">X</span>&quot;(红字改为需要的像素，包括5、10、15、20、30)</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td colspan="4">特定设置</td>
    </tr>
    <tr>
      <td>灰色背景</td>
      <td>主要用来突出表单区域</td>
      <td>&lt;div class=&quot;Dgw&quot;&gt;&lt;/div&gt;</td>
      <td class="brlg"><div class="Dgw">测试</div></td>
    </tr>
    <tr>
      <td>日期选择</td>
      <td>选择日期的icon按钮</td>
      <td>&lt;span class=&quot;dateto&quot;&gt;&lt;/span&gt;&lt;span class=&quot;datefrom&quot;&gt;&lt;/span&gt;</td>
      <td class="brlg"><span class="dateto"></span><span class="datefrom"></span></td>
    </tr>
    <tr>
      <td rowspan="3">按钮</td>
      <td>基本样式</td>
      <td>class=&quot;btn&quot;，可使用在input、button和a标签上</td>
      <td class="brlg"><input type="button" class="btn" value="测试">
        </input>
        <button class="btn">测试</button>
        <a href="#" class="btn">测试</a></td>
    </tr>
    <tr>
      <td>橙色</td>
      <td>class=&quot;btn Borange&quot;，可使用在input、button和a标签上</td>
      <td class="brlg"><input type="button" class="btn Borange" value="测试">
        </input>
        <button class="btn Borange">测试</button>
        <a href="#" class="btn Borange">测试</a></td>
    </tr>
    <tr>
      <td>白色</td>
      <td>class=&quot;btn Bwhite&quot;，可使用在input、button和a标签上</td>
      <td class="brlg"><input type="button" class="btn Bwhite" value="测试">
        </input>
        <button class="btn Bwhite">测试</button>
        <a href="#" class="btn Bwhite">测试</a></td>
    </tr>
    <tr>
      <td>输入框</td>
      <td>基本样式，需配合其他属性进行相信设置</td>
      <td>class=&quot;Bgray&quot;(该属性"Bgray"可以使用在按钮上)</td>
      <td class="brlg"><input type="text" class="Bgray" /><textarea cols="12" rows="1" class="Bgray"></textarea></td>
    </tr>
    <tr>
      <td rowspan="2">强调色</td>
      <td>红色</td>
      <td>&lt;span class=&quot;Bdr ml10&quot;&gt;&lt;/span&gt;</td>
      <td class="brlg"><span class="Bdr">测试</span></td>
    </tr>
    <tr>
      <td>蓝色</td>
      <td>&lt;span class=&quot;Bb ml10&quot;&gt;&lt;/span&gt;</td>
      <td class="brlg"><span class="Bb">测试</span></td>
    </tr>
    <tr>
      <td rowspan="9">分栏</td>
      <td>基于dl、ul标签的分栏</td>
      <td>class=&quot;colunm&quot;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td colspan="3">基于dl标签的分栏一组(dt-dd)为一栏，c后的数字代表栏数，T和D后的数字代表宽度，1单位=24像素</td>
    </tr>
    <tr>
      <td>c3T4D8</td>
      <td>&lt;dl class=&quot;colunm c3T4D8&quot;&gt;&lt;/dl&gt;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>c2T5D24</td>
      <td>&lt;dl class=&quot;colunm c2T5D24&quot;&gt;&lt;/dl&gt;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>c2T4D8</td>
      <td>&lt;dl class=&quot;colunm c2T4D8&quot;&gt;&lt;/dl&gt;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>c1T4D9</td>
      <td>&lt;dl class=&quot;colunm c1T4D9&quot;&gt;&lt;/dl&gt;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td colspan="3">基于ul标签的分栏一个li为一栏，c后的数字代表栏数，D后的数字代表宽度，1单位=24像素</td>
    </tr>
    <tr>
      <td>c2D15</td>
      <td>&lt;ul class=&quot;colunm c1T4D9&quot;&gt;&lt;/ul&gt;</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>自由分栏</td>
      <td>&lt;ul class=&quot;colunm&quot;&gt;&lt;/ul&gt;，用于单行多栏</td>
      <td class="brlg"></td>
    </tr>
    <tr>
      <td>圆角</td>
      <td>为元素添加圆角式样，IE暂时不支持</td>
      <td>class=&quot;radius<span class="cdr fw7">X</span>&quot;(红字改为需要的圆角幅度，包括4、8、12)</td>
      <td class="brlg"><button class="btn Borange radius8">测试</button><h3 class="Hb radius12">测试</h3><span class="Bdr radius4">测试</span></td>
    </tr>
    <tr>
      <td>阴影</td>
      <td>为元素添加阴影式样，IE暂时不支持</td>
      <td>class=&quot;shadow<span class="cdr fw7">X</span>&quot;(红字改为需要的阴影大小，包括2、4、6)</td>
      <td class="brlg"><button class="btn Borange shadow1">测试</button><h3 class="Hb shadow4">测试</h3><span class="Bdr shadow6">测试</span></td>
    </tr>
    <tr>
      <td>文字阴影</td>
      <td>为文字添加阴影式样，IE暂时不支持</td>
      <td>class=&quot;textshadow<span class="cdr fw7">X</span>&quot;(红字改为需要的阴影颜色，包括蓝色:b、红色:r、灰色:g)</td>
      <td class="brlg"><span class="textshadowr mr5">测试</span><span class="textshadowg mr5">测试</span><span class="textshadowb">测试</span></td>
    </tr>
  </tbody>
</table>

</body>
</html>